<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id ="app">
			<div v-if="books.length">
		
				<table border="1px" cellspacing="" cellpadding="">
					<thead>
						<tr>
							<th></th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in books">
						<td>{{item.id}}</td>
						<td>{{item.bookname}}</td>
						<td>{{item.data}}</td>
						<td>{{item.price}}</td>
						<td><button>-</button>{{item.num}}<button>+</button></td>
						<td><button>移除</button></td>
						</tr>
					</tbody>
					<!-- <tbody>
						<tr v-for="(item,index) in books"></tr>
						<td>{{item.id}}</td>
						<td>{{item.id}}</td>
					</tbody> -->
					
				</table>
				<h2>总价格: ￥300.02</h2>
			</div>
			
		</div>	
		
		<!--js的引入建议放在body最后，而不是放在head内-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data: {
					books: [
						{
							id: '1',
							data: '2010-10',
							price: '￥60.00',
							num: 1,
							bookname: '《Java从入门到放弃》'
						},
						{
							id: '1',
							data: '2012-10',
							price: '￥90.00',
							num: 1,
							bookname: '《PHP从入门到放弃》'
						},
						{
							id: '1',
							data: '2013-10',
							price: '￥80.01',
							num: 1,
							bookname: '《Python从入门到放弃》'
						},
						{
							id: '1',
							data: '2011-10',
							price: '￥70.02',
							num: 1,
							bookname: '《什么都是从入门到放弃》'
						}
					],
					length: 4
				}
			})
		</script>
	</body>
</html>
